<#include "../base/basic-page.ftl">
<#include "../common/table.ftl">
<#include "../common/modal.ftl">
<#include "../common/form.ftl">
<@page_head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<script type="application/javascript">
    window.pageData = ${pageDataJson};
    const {records} = window.pageData;
    window.list = records;
    console.log(window.list);
</script>
</@page_head>
<@page_body page_title="会员管理" side_active="/admin/user/list">
    <div class="main-content container-fluid">
        <div class="row">
            <!--Responsive table-->
            <div class="col-sm-12">
                <@table_wrap table_title="用户列表" html_ex="ng-controller=\"tableCtrl\"">
                <@table_tools>
                    <button class="btn btn-space btn-primary" target-modal="newModal">
                        新增用户
                    </button>
                </@table_tools>
                <@table extra="table-striped table-hover" extrav2='id="userList" ng-controller="tableListCtrl"'>
                    <@table_head>
                        <th style="width:5%;">
                            <label class="custom-control custom-control-sm custom-checkbox">
                                <input type="checkbox" class="custom-control-input">
                                <span class="custom-control-label"></span>
                            </label>
                        </th>
                        <th style="width:10%;">会员信息</th>
                        <th style="width:10%;">手机号码</th>
                        <th style="width:7%;">会员级别</th>
                        <th style="width:10%;">所属上级</th>
                        <th style="width:7%;" class="number">下级数量</th>
                        <th style="width:7%;" class="number">账户余额</th>
                        <th style="width:10%;">结算收益</th>
                        <th style="width:10%;">本月成交订单</th>
                        <th style="width:10%;">注册时间</th>
                        <th style="width:19%;">操作</th>
                    </@table_head>
                    <@table_body>
                    <tr ng-repeat="item in list">
                        <td>
                            <label class="custom-control custom-control-sm custom-checkbox">
                                <input type="checkbox" class="custom-control-input"><span class="custom-control-label"></span>
                            </label>
                        </td>

                        <td class="user-avatar cell-detail user-info">
                            <img class="mt-0 mt-md-2 mt-lg-0" src="/static/img/img-avatar-1.png" alt="Avatar">
                            <span>{{ item.userName|none:'暂无昵称' }}</span>
                            <span class="cell-detail-description">ID:{{ item.id }}</span>
                        </td>
                        <td>{{ item.phoneNumber }}</td>
                        <td>{{ item.userLevelStr }}</td>
                        <td>{{ item.parentNumStr }}</td>
                        <td class="number">{{ item.childCountNum }}</td>
                        <td class="number">￥{{ item.balance}} </td>
                        <td class="cell-detail">
                            <span>本月结算: ￥0.00</span>
                            <span class="cell-detail-description">累计结算: ￥0.00</span>
                        </td>
                        <td class="cell-detail">
                            <span>预估收益: ￥0.00</span>
                            <span class="cell-detail-description">成交订单: ￥0.00</span>
                        </td>
                        <td class="cell-detail">
                            <span>{{ item.regDate }}</span>
                            <span class="cell-detail-description">{{ item.regTime }}</span>
                        </td>
                        <td>
                            <button class="btn btn-rounded btn-space btn-success"
                                    target-modal="updateModal">
                                详情
                            </button>
                            <button class="btn btn-rounded btn-space btn-danger" data-toggle="modal">加入黑名单</button>
                        </td>
                        <#--<td>{{ item.parentId }}</td>-->
                        <#--<td>{{ item.childCount }}</td>-->
                        <#--<td class="number"> ￥{{ item.userBalance }}</td>-->
                        <#--<td class="cell-detail">-->
                            <#--<span>本月结算: ￥9,999</span>-->
                            <#--<span class="cell-detail-description">总收益: ￥9,999</span>-->
                        <#--</td>-->
                        <#--<td class="cell-detail">-->
                            <#--<span>本月成交: ￥9,999</span>-->
                            <#--<span class="cell-detail-description">总成交: ￥9,999</span>-->
                        <#--</td>-->
                        <#--<td class="cell-detail">-->
                            <#--<span>2018年04月29日</span>-->
                            <#--<span class="cell-detail-description">11:11</span>-->
                        <#--</td>-->
                    </tr>
                    </@table_body>
                </@table>
                <@table_footer_ex status="当前显示第&nbsp;${(pageData.current)!'0'}&nbsp页。一共&nbsp;${(pageData.totalPage)!'0'}&nbsp;页">
                    <ng-light-pagination current="${pageData.current}" total="${pageData.total}" size="${pageData.size}">
                    </ng-light-pagination>
                </@table_footer_ex>
                </@table_wrap>
            </div>
        </div>
    </div>
</@page_body>
<@modal id='model-user-new'>
    <@modal_header title="新增用户">

    </@modal_header>
<@formNovalidate id='form-user-add' class=''>
    <@modal_body>
    <div class="form-group">
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="0" checked>
            <span class="custom-control-label">普通用户</span>
        </label>
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" name="userLevel" value="1">
            <span class="custom-control-label">代理用户</span>
        </label>
    </div>
        <div class="form-group">
            <label for="user-name">用户昵称</label>
            <input class="form-control form-control-xs"
                   id="user-name" name="userName"
                   autocomplete="off" type="text"
                   placeholder="请输入用户昵称">
        </div>
    <div class="form-group">
        <label for="user-phone">手机号码</label>
        <input class="form-control form-control-xs"
               id="user-phone" name="phoneNumber"
               autocomplete="off" type="tel"
               placeholder="请输入手机号码"
               required data-parsley-error-message="请输入手机号码">
    </div>
    <div class="form-group">
        <label for="user-password">登录密码</label>
        <input class="form-control form-control-xs"
               id="user-password" name="password"
               autocomplete="off" type="password"
               placeholder="请输入登录密码"
               required data-parsley-error-message="请输入登录密码">
    </div>
    <div class="form-group">
        <label for="user-parent">上级ID</label>
        <input class="form-control form-control-xs"
               id="user-parent" name="parentId"
               autocomplete="off" type="password"
               placeholder="请输入上级ID">
    </div>
    </@modal_body>
    <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" data-dismiss="modal">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
    </@modal_footer>
</@formNovalidate>
</@modal>
<script modal-form-view="newModal" service="post:/admin/user/list" type="text/ng-template" id="modal.add">
    <@modal_header cancelHtmlEx='ng-click="$ctrl.cancel()"' title="新增用户">

    </@modal_header>
<@formNovalidate class='' htmlEx='ng-controller="formCtrl" ng-submit="submit()"'>
    <@modal_body>
    <div ng-init="data.userLevel='2'"  class="form-group">
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input"
                   type="radio"
                   ng-model="data.userLevel"
                   name="userLevel"
                   value="2">
            <span class="custom-control-label">代理商会员</span>
        </label>
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" ng-model="data.userLevel" name="userLevel" value="1">
            <span class="custom-control-label">高级代理商</span>
        </label>
    </div>
        <div class="form-group">
            <label for="user-name">用户昵称</label>
            <input class="form-control form-control-xs"
                   id="user-name" name="userName"
                   ng-model="data.userName"
                   autocomplete="off" type="text"
                   placeholder="请输入用户昵称">
        </div>
    <div class="form-group">
        <label for="user-phone">手机号码</label>
        <input class="form-control form-control-xs"
               id="user-phone" name="phoneNumber"
               autocomplete="off" type="tel"
               ng-model="data.phoneNumber"
               placeholder="请输入手机号码"
               required data-parsley-error-message="请输入手机号码">
    </div>
    <div class="form-group">
        <label for="user-password">登录密码</label>
        <input class="form-control form-control-xs"
               id="user-password" name="password"
               autocomplete="off" type="password"
               ng-model="data.password"
               placeholder="请输入登录密码"
               required data-parsley-error-message="请输入登录密码">
    </div>
    <div class="form-group">
        <label for="user-parent">指派上级</label>
        <input class="form-control form-control-xs"
               id="user-parent" name="parentId"
               autocomplete="off" type="tel"
               ng-model="data.parent"
               placeholder="请指派上级的手机号码">
    </div>
    </@modal_body>
    <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" ng-click="$ctrl.cancel()">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
    </@modal_footer>
</@formNovalidate>
</script>
<script modal-form-view="updateModal" service="patch:/admin/user/list" type="text/ng-template" id="modal.update">
    <@modal_header cancelHtmlEx='ng-click="$ctrl.cancel()"' title="编辑用户">

    </@modal_header>
<@formNovalidate class='' htmlEx='method="post" ng-controller="formCtrl" ng-submit="submit()"'>
    <@modal_body>
    <div class="form-group">
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input"
                   type="radio"
                   ng-model="data.userLevel"
                   name="userLevel"
                   value="2">
            <span class="custom-control-label">代理商会员</span>
        </label>
        <label class="custom-control custom-radio custom-control-inline">
            <input class="custom-control-input" type="radio" ng-model="data.userLevel" name="userLevel" value="1">
            <span class="custom-control-label">高级代理商</span>
        </label>
    </div>
        <div class="form-group">
            <label for="user-name">用户昵称</label>
            <input class="form-control form-control-xs"
                   id="user-name" name="userName"
                   ng-model="data.userName"
                   autocomplete="off" type="text"
                   placeholder="请输入用户昵称">
        </div>
    <div class="form-group">
        <label for="user-phone">手机号码</label>
        <input class="form-control form-control-xs"
               id="user-phone" name="phoneNumber"
               autocomplete="off" type="tel"
               ng-model="data.phoneNumber"
               disabled
               placeholder="请输入手机号码"
               required data-parsley-error-message="请输入手机号码">
    </div>
    <div class="form-group">
        <label for="user-password">登录密码</label>
        <input class="form-control form-control-xs"
               id="user-password" name="password"
               autocomplete="off" type="password"
               ng-model="data.password"
               placeholder="请输入登录密码">
    </div>
    <div class="form-group">
        <label for="user-parent">指派上级</label>
        <input class="form-control form-control-xs"
               id="user-parent" name="parentId"
               autocomplete="off" type="tel"
               ng-model="data.parent"
               placeholder="请指派上级的手机号码">
    </div>
    </@modal_body>
    <@modal_footer>
        <button class="btn btn-secondary md-close" type="button" ng-click="$ctrl.cancel()">取消</button>
        <button class="btn btn-primary md-close" type="submit">确认</button>
    </@modal_footer>
</@formNovalidate>
</script>
<@page_foot>

<script src="/static/lib/parsley/parsley.min.js" type="text/javascript"></script>
<script src="/static/js/md5.min.js" type="text/javascript"></script>
<script src="/static/js/ng-light-pagination.js?v=${.now?string['hhmmSSsss']}"></script>
<script src="/static/js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script src="/static/js/ng-table-flow.js?v=${.now?string['hhmmSSsss']}"></script>
<script src="/static/js/admin-cli.js?v=${.now?string['hhmmSSsss']}"></script>
<script type="text/javascript">
    const app = angular.module('s7buy-admin',['ngLightPagination','ngTableFlow']);
    app.controller('tableListCtrl',function ($scope,) {
        const {list} = $scope;
        list.forEach(function (item) {
            let {userName,
                userLevel,
                parentNumber,
                childCount,
                userBalance
            } = item;
            if (!userName) {
                item.userNameReal = '暂无昵称';
            }
            item.userLevelStr =((userLevel===1)?'高级代理商':(userLevel===2)?'代理商会员':'其他用户');
            item.userLevel =userLevel + '';
            item.parentNumStr = (parentNumber?parentNumber:'无');
            item.childCountNum = (childCount?childCount:'0');
            item.balance = (userBalance?userBalance:0);
            item.parent = parentNumber;
            // targetList.push(item);
            // return item;
        });
        // console.log('定制控制器',$scope);
    });
    // app.controller
    $(document).ready(function () {
        //initialize the javascript
        var cli = new S7BuyCli();
        cli.init();
        <#--cli.initUser({pageData:${pageDataJson}});-->
        // App.userList();
    });
</script>
</@page_foot>